<template>
  <container-template 
    :nav-info="navInfo"
    @hoverHandler="handleChange"
  >
    <a 
      v-for="(item, index) of currentGoods" 
      :key="index" 
      :href="item.url"
      class="good" 
    >
      <div class="quality-img">
        <img 
          :src="item.img"
          :alt="item.title"
        >
      </div>
      <p class="title">{{ item.title }}</p>
      <p class="pos clearfix"><span>{{ item.pos }}</span></p>
      <p class="price"><span v-if="item.price.length">￥</span>{{ item.price.length ? parseInt(item.price) : '免费' }}<span v-if="item.price.length">/起</span></p>
    </a>
  </container-template>
</template>

<script>
import ContainerTemplate from './ContainerTemplate.vue'

export default {
  components: {
    ContainerTemplate
  },
  data() {
    return {
      navInfo: {
        title: '有格调',
        items: [
          {
            kind: 'all',
            keyword: '景点',
            text: '全部'
          },
          {
            kind: 'part',
            keyword: '美食',
            text: '约会聚餐'
          },
          {
            kind: 'spa',
            keyword: '丽人',
            text: '丽人SPA'
          },
          {
            kind: 'movie',
            keyword: '电影',
            text: '电影演出'
          },
          {
            kind: 'travel',
            keyword: '旅游',
            text: '品质出游'
          }
        ]
      },
      goodsList: {
        all: [],
        part: [],
        spa: [],
        movie: [],
        travel: []
      },
      currentKind: 'all'
    }
  },
  computed: {
    currentGoods() {
      return this.goodsList[this.currentKind]
    }
  },
  methods: {
    async handleChange([keyword, kind]) {
      this.currentKind = kind
      if (this.goodsList[kind].length > 0) return

      let {status, data: {count, pois}} = await this.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword,
          city: this.$store.state.geo.position.city
        }
      })

      if (status === 200 && count > 0) {
        let ret = pois.filter(item => item.photos.length).map(item => {
          return {
            title: item.name,
            pos: item.type.split(';')[0],
            price: item.biz_ext.cost || '暂无',
            img: item.photos[0].url,
            url: '/'
          }
        })

        this.goodsList[kind] = ret.slice(0, 6)
      } else {
        this.goodsList[kind] = []
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .good
    float left
    width 33.3%
    height 314px
    padding 10px
    box-sizing border-box
    background-color #ffffff
    transition background-color .5s
    color #999999
    &:hover
      background-color #F4F4F4
    .quality-img
      overflow hidden
      max-width 100%
      height 208px
      margin-bottom 11px
      cursor pointer
      img
        width 100%
        height 100%
        border-radius 4px
    .title
      overflow hidden
      height 22px
      margin-top 8px
      line-height 22px
      font-weight 500
      white-space nowrap
      text-overflow ellipsis
      color #222222
      font-size 16px
      cursor pointer
    .pos
      span 
        float left
        height 18px
        margin-right 10px
        margin-top 5px
        padding 0 3px
        line-height 18px
        border 1px solid #d8d8d8
        border-radius 2px
        text-align center
        font-size 12px
    .price
      overflow hidden
      height 27px
      line-height 27px
      margin-top 10px
      font-size 20px
      color #be9e4d
      span 
        font-size 12px
        font-weight 500
</style>
